Mr笔记

Appearance

S07-03 数据可视化-Canvas-项目：mr-ts-tank-2406 ​

[TOC]

简介： 本项目是使用 TS+Canvas 开发的坦克游戏

创建环境 ​

创建项目 ​

1、在 github 中创建库

2、在 gitee 中同步 github 的项目

3、在本地父目录下克隆 github 中的项目

sh
git clone git@github.com:rmRay/mr-ts-tank-2406.git

4、在本地创建 vite+ts 的项目

sh
pnpm create vite
# 名称 mr-ts-tank-2406
# 选 Vanilla
# 选 TypeScript

5、复制 mr-ts-tank-2406 目录下的文件到克隆下来的目录中

6、修改./git/config配置文件

sh
[core]
	repositoryformatversion = 0
	filemode = false
	bare = false
	logallrefupdates = true
	symlinks = false
	ignorecase = true
[remote "origin"]
	url = git@gitee.com:meRay/mr-ts-tank-2406.git
	fetch = +refs/heads/*:refs/remotes/origin/*
[remote "github"]
	url = git@github.com:rmRay/mr-ts-tank-2406.git
	fetch = +refs/heads/*:refs/remotes/origin/*
[branch "main"]
	remote = origin
	merge = refs/heads/main

6、提交 git，并推送到 gitee 和 github 中

sh
git add .
git commit -m 'feat(init): 创建项目'
git push # 提交到gitee
git push github # 提交到github

安装依赖 ​

1、安装所有依赖

sh
pnpm i

2、安装 sass

sh
pnpm i sass -D

重置样式 ​

1、安装 minireset 初始化样式

2、设置样式

image-20240619130659825

3、插件：通过快捷键新建文件和文件夹

需要事先设置热键唤起该插件

image-20240619130905257

4、动态设置 canvas 尺寸

  • 配置

    image-20240619131217754

  • 设置

    image-20240619131616893

开发分析 ​

通过创建众多的 canvas，每个 canvas 管理某一类资源，如草地、墙、坦克等

image-20240619130208418

目录结构 ​

image-20240619131853705

画布 ​

CanvasAbstract ​

定义抽象类 ​

1、定义一个父级的抽象类 CanvasAbstract

image-20240619132811215

创建画布 ​

createCanvas()： 抽取创建 canvas 的代码段

image-20240619133423511

存储对象 ​

在类中定义 items 用于存储草地、坦克等对象的信息

image-20240619134002536

绘制模型 ​

drawModals():

1、绘制模型(草地)

image-20240619134913444

image-20240619134729067

image-20240619134948053

2、模型配置

image-20240619134655762

3、动态设置图片的坐标

image-20240619134849682

4、抽取加载贴图

  • 1 在配置中导入图片

    image-20240619151129147

  • 2 创建image.ts文件，抽取加载图片的函数，返回 Promise，因为加载图片是一个异步的过程

    image-20240619152307865

  • 3 异步请求所有导出的 img

    image-20240619152633622

5、优化： 优化模型贴图逻辑

  • 定义抽象方法 render()

    image-20240619153022757

  • 在 Straw 中实现 render()

    image-20240619153330740

  • 调用 render()

    image-20240619153426370

  • 在抽象类中实现drawModels()

    image-20240619154614066

6、绘制多个草地

  • 1 修改配置项，存放多个草地

    image-20240619153713531

  • 2 添加数量变量

    image-20240619153929614

  • 3 遍历 num 遍，绘制 num 个贴图

    image-20240619154614066

  • 4 设置贴图随机位置

    image-20240619154420468

7、去除重叠的坐标

  • 1 遍历生成的随机坐标的集合

    image-20240619154953914

  • 2 批量生成唯一坐标集合

    image-20240619155608664

8、上面空 2 行，下面空 3 行

image-20240619162946717

9、效果

image-20240619163022148

创建模型实例 ​

1、抽象一个模型抽象类 ModelAbstract

image-20240619160503577

2、在 Straw 中实现抽象类

image-20240619160547001

3、在画布的 straw 类中，使用模型类 straw

image-20240619160700544

4、重构 canvasAbstract 中的 drawModel()方法

image-20240619160838927

模型的 TS 类型 ​

1、在vite-env.d.ts中定义类型声明

image-20240619161255402

2、实现类型接口

image-20240619161409422

3、使用类型声明

image-20240619161543524

抽取坐标方法 ​

1、创建src/utils/position.ts文件，并将抽取的坐标方法放入

image-20240619163520944

2、调用 position.getCollection()

image-20240619164339776

3、全局保存草地的位置集合

image-20240619164255621

修复 BUG ​

BUG：

  • 在实际游戏中，会不断调用 Straw.render()函数。

    image-20240619164805712

  • 这会导致 CanvasAbstract.drawModels()也会不断被调用。

    image-20240619165216778

  • 这会导致不断地生成 instance 实例

解决： 将生成 instance 实例和渲染分开

  • 全局保存 instance 实例

    image-20240619165805944

  • 重新写一个渲染方法

    image-20240619165447151

  • 在 Straw 画布的构造函数中调用 createModels()，在 render()方法中调用 renderModels()

    image-20240619165939209

Straw ​

1、定义 Straw 类

image-20240619132328073

2、引入

image-20240619132446322

3、抽取到抽象类 CanvasAbstract 中，并继承它

Wall ​

1、导入贴图

image-20240619170835040

2、修改模型父类

image-20240619171640895

3、定义 Wall 的模型类，修改 straw 的模型类

image-20240619171356091

image-20240619171358795

4、在入口文件main.ts中，调用 render()

image-20240619171525750

5、修改 canvas 样式

image-20240619171815524

Water ​

1、配置 config

image-20240619172050332

2、定义 Water 的模型类

image-20240619172126885

3、定义 Water 的画布类

image-20240619172303535

4、在入口文件main.ts中，调用 render()

image-20240619172249055

Steel ​

1、配置 config

image-20240619172508806

2、定义 Steel 的模型类

image-20240619172542119

3、定义 Steel 的画布类

image-20240619172629087

4、在入口文件main.ts中，调用 render()

image-20240619172556331

重写生成模型的方法 ​

1、父类中定义抽象方法

2、子类中实现抽象方法

image-20240619173615132

Tank ​

基本使用 ​

1、配置 config

image-20240619174216383

2、定义 Tank 的模型类

image-20240619174707069

3、定义 Tank 的画布类

image-20240619174210416

4、在入口文件main.ts中，调用 render()

image-20240619174311897

重写 createModels() ​

重写 tank 生成方法 createModels()

image-20240619174718641

改变坦克方向 ​

1、修改 config

image-20240619181120790

2、创建src/enum/direction.ts，存放坦克方向的枚举类型

image-20240619181604098

3、生成随机方向

4、生成随机方向的坦克

5、通过 lodash 实现首字母大写

模型 ​

ModelAbstract ​

1、定义抽象方法 render()让子类去实现

image-20240619162153400

Straw ​

1、在子类中实现抽象方法 render()

image-20240619162103268

image-20240619162025320

Wall ​